<template>
	<view class="box">
		<view class="one">
			重置密码
		</view>
		<view class="two">
			<view class="tl">
				<input type="text" placeholder="请输入验证码" />
			</view>
			<view class="tr">
				获取验证码
			</view>

		</view>
		<view class="three">
			<uni-easyinput type="password" v-model="oldpassword" placeholder="请输入新密码"></uni-easyinput>
		</view>
		<view class="four">
			<uni-easyinput type="password" v-model="newpassword" placeholder="请确认新密码"></uni-easyinput>
		</view>
		<view class="five">
			<button class="but">保存</button>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	let oldpassword = ref('')
	let newpassword = ref('')
</script>

<style scoped lang="scss">
	.box {
		.five{
			padding: 30rpx;
			.but {
				background-color: #A0E6C4;
				border-radius:50rpx ;
				color: #fff;
			}
			
		}
		
		.three {
			width: 750rpx;
			height: 130rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #F4F4F4;
			display: flex;
			align-items: center;

		}

		.four {
			width: 750rpx;
			height: 130rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #F4F4F4;
			display: flex;
			align-items: center;
		}

		.two {
			width: 750rpx;
			height: 130rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #F4F4F4;

			.tr {
				width: 170rpx;
				height: 130rpx;
				line-height: 130rpx;
				border-left: 1px solid #F4F4F4;
				padding-left: 20rpx;
				box-sizing: border-box;
				color: #2CC792;
			}
		}

		.one {
			width: 750rpx;
			height: 300rpx;
			font-size: 60rpx;
			font-weight: bolder;
			padding-top: 100rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
		}
	}
</style>